import React, { useContext } from 'react';
// import {observer,inject} from 'mobx-react';
import {observer} from 'mobx-react-lite';
import storeContext from '../context/shop';

// @inject('shop')
// @observer
// class Count extends Component {

//     change(flag){
//         this.props.shop.changeCount(flag,this.props.index)
//     }

//     render() {
//         console.log(this.props)
//         return (
//             <div>
//                 <button onClick={this.change.bind(this,false)}>-</button>
//                 <span>{this.props.count}</span>
//                 <button onClick={this.change.bind(this,true)}>+</button>
//             </div>
//         )
//     }
// }

// export default Count


function Count(props){
    let {shop} = useContext(storeContext);

    let change = function(flag){
        shop.changeCount(flag,props.index)
    }
    
    return (
        <div>
            <button onClick={change.bind(this,false)}>-</button>
            <span>{props.count}</span>
            <button onClick={change.bind(this,true)}>+</button>
        </div>
    )
}


export default observer(Count)